<template>
    <div class="view-content">
        <h3>专业技能</h3>
        <div class="content">
            <p v-for="(item, index) in skill" :key="item.label">{{ index + 1 }}、{{ item.label }}</p>
        </div>
        <h3>熟练度</h3>
        <div class="">
            <div class="rows">
                <div class="label">标签名</div>
                <div>
                    <ul>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                    </ul>
                </div>
            </div>
        </div>
        <h3>开源项目</h3>
        <div class="project-list-content">
            <div class="item">
                <div>简介内容</div>
                <div class="title">我的简历 - 模板</div>
                <a href='https://gitee.com/tanglefei1106/vite-vue3-ts/stargazers' target="_blank">
                    <img src='https://gitee.com/tanglefei1106/vite-vue3-ts/badge/star.svg?theme=dark' alt='star' />
                </a>
            </div>

        </div>

    </div>
</template>
    
<script setup lang="ts">
const skill = [
    { label: '精通 HTML、CSS、JavaScript、Jquery 等基础技术，可独立完成开发' },
    { label: '熟练使用 Vue、UniApp、微信小程序、Vant、UView、Ant-design-vue、Element 等前端开发框架和插件，熟悉前端的MVC和MVVM构架思想' },
    { label: '熟练使用基于H5开发/uniapp开发的APP、微信公众号及小程序，有多个成功项目经验' },
    { label: '熟练使用 hbilder、vscode、微信开发工具 等常用开发软件' },
    { label: '熟练使用 Git 代码管理工具' },
    { label: '熟练使用 腾讯地图以及微信小程序MAP组件 开发地图' },
    { label: '熟练使用HTML5中得 Canvas 进行图片绘制' },
    { label: '了解服务器搭建、域名解析、SSL证书认证、OSS对象存储等运维相关知识，有自己的域名/服务器/云存储，地址：https://www.lefeifei.cn' },
    { label: '了解Jenkins部署' },
]

</script>
    
<style scoped lang="scss">
.project-list-content {
    display: flex;

    .item {
        .title {
            font-size: 18px;
            font-weight: 700;
        }
    }
}
</style>